import React, {createContext, useReducer} from 'react'

const reducer = (state, action) => {
  switch (action.type) {
    case UPDATE_COLOR:
      return action.data
    case RESET_COLOR:
      return 'black'
    default:
      return state
  }
}
export const ColorContext = createContext({})
export const UPDATE_COLOR = 'UPDATE_COLOR'
export const RESET_COLOR = 'RESET_COLOR'
export const Color = props => {
  const [color, dispatch] = useReducer(reducer, 'black')
  return (
    <ColorContext.Provider value={{color, dispatch}}>
      {props.children}
    </ColorContext.Provider>
  )
}
